<template>
	<!-- 学习计划添加 -->
	<div>
		<!-- 标题区域 -->
		<h3>学习计划表</h3>
		<!-- 提交区域 -->
		<el-card>
			<el-form @submit.prevent="add">
				<el-row>
					<!-- 学习科目 -->
					<el-form-item label="学习科目">
						<el-input v-model.trim="subject" placeholder="请输入学习科目" />
					</el-form-item>
					<!-- 学习任务 -->
					<el-form-item label="学习任务" style="padding: 0 10px;">
						<el-input v-model.trim="content" style="width: 240px" :rows="1" type="textarea" placeholder="请输入学习内容" />
					</el-form-item>
					<!-- 学习地点 -->
					<el-form-item label="学习地点">
						<el-select v-model="selectedOption" style="width: 240px">
							<el-option v-for="(item,i) in options" :key="i" :value="item.place" :label="item.place">
							</el-option>
						</el-select>
					</el-form-item>
 
					<!-- 添加按钮 -->
					<el-form-item style="padding: 0 10px;">
						<el-button type="primary" @click="add">添加</el-button>
					</el-form-item>
				</el-row>
			</el-form>
		</el-card>
	</div>
 
</template>

<script>
export default {
  data() {
    return {
      subject: '', //学习科目 
      content: '', //学习内容 			
      selectedOption: '自习室', //学习地点 
      // 供选择的学习地方
      options: [
        { placeCode: 0, place: '自习室' },
        { placeCode: 1, place: '图书馆' },
        { placeCode: 2, place: '宿舍' },
      ],
    }
  },
  methods: {
    // 添加方法
    add() {
      // 学习科目不能为空
      if (this.subject === '') {
        alert('学习科目为必填项！')
        return
      }
      // 触发父组件自定义事件addItem并传参
      this.$emit('addItem', this.subject, this.content, this.selectedOption)
      // 变量重置初始值
      this.subject = ''
      this.content = ''
      this.selectedOption = '自习室'
    },
  },
}
</script>

<style>
.el-card {
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 15px;
}
.el-form-item {
  margin-bottom: 10px;
}
</style>